<template>
    <div>
        <div>
            <el-col :span="6">
                <el-input v-model="nick_name" placeholder="用户名" suffix-icon="el-icon-search" @keyup.enter.native="submit"></el-input>
            </el-col>
            <el-button type="info" round class="left-mar"
              @click="submit" 
              v-loading.fullscreen.lock="screen_loading">确认</el-button>
        </div>
        <div>
            <el-table :data="users" style="width: 100%">
                <el-table-column label="用户名" prop="nick_name">
                </el-table-column>
                <el-table-column label="用户ID" prop="user_id">
                </el-table-column>
                <el-table-column label="KPI">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="intoUser(scope.row.user_id)">个人KPI</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
          :page-size="page_size"
          :total="total"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page="current_page"></el-pagination>
    </div>
</template>

<script>
export default {
    name: 'UserList',
    data: function() {
        return {
            allusers: [],
            users: [],
            // filter_user: [],
            nick_name: '',
            headers: {headers:{"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}},
            total: 0,
            page_size: 20,
            current_page: 1,
            screen_loading: false,
        }
    },
    // created: function() {
    //     this.fetchData()
    // },
    // watch: {
    //     nick_name: function() {
    //         let that = this
    //         let filter_user = []

    //         if (that.nick_name == '') {
    //             that.filter_user = that.allusers
    //         }
    //         for (let u = 0; u < that.allusers.length; u ++) {
    //             if (that.allusers[u].nick_name.indexOf(that.nick_name) !== -1) {
    //                 filter_user.push(that.allusers[u])
    //             }
    //         }
    //         that.total = filter_user.length
    //         that.filter_user = filter_user
    //         this.handleCurrentChange(1)
    //     }
    // },
    methods: {
        submit: function() {
            let that = this
            that.screen_loading = true
            this.$axios.post("/v1/users", {nick_name:that.nick_name}, that.headers)
              .then(response => {
                  that.allusers = response.data.users
                //   that.filter_user = response.data.users
                  that.total = response.data.total
                  that.users = that.allusers.slice(0, 20)
                  that.screen_loading = false
              }).catch(err => {
                  console.log(err)
              })
        },
        intoUser: function(user_id) {
            // let route_data = this.$router.push({name: "UserKPI", params: {user_id: user_id}})
            let route_data = this.$router.resolve({
                name: "UserKPI",
                query: {user_id: user_id},
                params: {user_id: user_id}
            })
            window.open(route_data.href, "_blank")
        },
        handleCurrentChange: function(val) {
            this.current_page = val
            let start = (val - 1) * 20
            let end = start + 20
            if (end > this.total) {
                end = this.total
            }
            // this.users = this.filter_user.slice(start, end)
            this.users = this.allusers.slice(start, end)
        }
    }
}
</script>


<style>
.left-mar {
    margin-left: 10px;
}
</style>
